<template>
  <view class="deco-person-service-bar" :style="[innerStyle]">
    <view v-if="data.data.layout === 'list'" class="flex-1">
      <zm-cell-group :border="false" border-radius="16rpx" title-size="30rpx" content-size="26rpx" content-color="#666" right-icon-size="32rpx" right-icon-color="#ccc" custom-class="py-10">
        <zm-cell v-for="(item, index) in data.data.list" :key="index" :icon="item.image" icon-size="46rpx" :title="item.name" is-link padding="27rpx 20rpx" @click="handleClickItem(item)">
          <view slot="content" class="flex mr-8">
            <text v-if="item.value == 'collectFilmList' && collectionCount > 0" class="text-666 font-26 text-line-1">共{{ collectionCount }}部</text>
          </view>
        </zm-cell>
      </zm-cell-group>
    </view>
    <view v-else class="flex flex-1 flex-col bg-white px-20 py-24 radius-16">
      <text class="font-32 font-700">我的服务</text>
      <view class="grid-wrap" :style="[gridStyle]">
        <view v-for="(item, index) in data.data.list" :key="index" class="flex flex-col items-center" @click="handleClickItem(item)">
          <u-image width="74rpx" height="74rpx" :src="item.image"></u-image>
          <text class="text-666">{{ item.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { mapGetters } from "vuex"
export default {
  name: "deco-person-service-bar",
  mixins: [mixin],
  data() {
    return {
      collectionCount: 0
    }
  },
  computed: {
    ...mapGetters(["login", "userInfo", "personDeco"]),
    gridStyle() {
      const style = {}
      style["grid-template-columns"] = `repeat(${this.data.data.col}, minmax(0, 1fr))`
      return style
    }
  },
  watch: {
    login: {
      immediate: true,
      handler() {
        this.handleGetCollectionCount()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.mitt) {
        this.mitt.on("refresh", () => {
          this.handleGetCollectionCount()
        })
      }
    },
    // 跳转订单
    handleClickItem(data) {
      this.useRouteJupm(data)
    },
    // 获取收藏电影数量
    async handleGetCollectionCount() {
      const res = await this.$api.film.getCollectionList({ pageSize: 9999 }, { login: true })
      this.collectionCount = res.count
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-person-service-bar {
  flex: 1;
  display: flex;
  align-items: center;
  .grid-wrap {
    display: grid;
    row-gap: 34rpx;
    margin-top: 18rpx;
  }
}
</style>
